GreenSock

If the web site uses GSAP, and at least parts of that web site are behind a paywall, it would technically be appropriate to get the special commercial license. That being said, our entire business model relies on the honor system and being supported by customers who see the value in what we provide. So if you're not using GSAP in any areas of the site that are behind a paywall and you don't think the value GSAP delivers is worth the membership fee, we're totally fine with you not joining Club GSAP. We're passionate about having happy customers around here 🙂 I hope the tools serve you well!

Thanks for checking, @kch! Yes, since parts of the web site itself that uses GSAP will only be available to paying members, that would require the special commercial license that comes with the "Business" Club GSAP membership. Basically, if you answer "yes" to any of the following, you'd need that special commercial license: Do you have multiple developers that need access to the bonus plugins like SplitText, ScrollSmoother, MorphSVG, etc.? Does your GSAP-enhanced website/game/product require the user to pay a fee to use? (like Netflix.com) Are you selling a GSAP-enhanced product to multiple end users? (like a website template, theme or game) Are you using GSAP in a game/app with optional paid features/upgrades? If your website sells products that aren't GSAP-enhanced like clothing, widgets, food, etc., that doesn't require the commercial license. It only matters if the thing for which a fee is collected uses GSAP in some way. The standard "no charge" license even covers usage in projects where only a one-time development fee is charged, like an agency that's paid to build a fancy web site that's free for everyone to use. We like to think that a Club GSAP membership pays for itself very quickly when you consider all the time it’ll save, the added capabilities that the bonus plugins deliver...and of course that sense of having animation superpowers is priceless 🙂 Thanks again for asking about this. Let us know if you have any other questions.

MorphSVGPlugin is not in the public/free package - it's only for Club GSAP members ("Premium" and "Business"). You obviously have a Premium membership (thanks!) but you're importing the standard (free) "gsap" NPM package into your demo, so that won't have it. You can use the "gsap-trial" package instead. See https://gsap.com/trial Also, don't forget to register the useGSAP hook: gsap.registerPlugin(useGSAP, MorphSVGPlugin);

Hm, do you have a minimal demo that demonstrates the behavior that's confusing for you? If you're trying to seek backwards from slightly before the current position, you could do something like: tl.previousLabel(tl.time() - 0.01); // just subtract a little from the current time Does that help?

The only area I'm aware of that may not be "compatible" is that GSAP's standard "no charge" license allows all uses (even commercial ones) EXCEPT if a fee is being collected from MULTIPLE users. It covers usage in projects where only a one-time development fee is charged, like an agency that's paid to build a fancy web site that's free for everyone to use. That's totally fine. If your website sells products that aren't GSAP-enhanced like clothing, widgets, food, etc., that doesn't require the commercial license either. It only matters if the thing for which a fee is collected uses GSAP in some way, and only if it's from MULTIPLE users. Basically, if you answer yes to any of these questions, it'd require the special commercial license that comes with "Business" Club GSAP memberships: Do you have multiple developers that need access to the bonus plugins like SplitText, ScrollSmoother, MorphSVG, etc.? Does your GSAP-enhanced website/game/product require the user to pay a fee to use? (like Netflix.com) Are you selling a GSAP-enhanced product to multiple end users? (like a website template, theme or game) Are you using GSAP in a game/app with optional paid features/upgrades? GSAP doesn't require any attribution whatsoever. We'd consider it an honor if you use GSAP in your student project. That's totally fine with us. Just beware that the GSAP files would be subject to the standard "no charge" GreenSock license. Maybe you could simply make a note in your license document that indicates as much? Like "This project is released under Creative Commons Attribution 4.0 license, except the GSAP files which are subject to the license at https://gsap.com/standard-license" 🤷‍♂️

If I understand your goal correctly, that's just a CSS thing - for an element to have a stacking order like that, it must have position: relative (or something besides static). https://codepen.io/GreenSock/pen/BaEgEOB?editors=0110

There are a few helper functions that can save you from figuring out the math/logic: To find the scroll position of a particular element: https://gsap.com/docs/v3/HelperFunctions/helpers/getScrollLookup/ To find the scroll position of a particular animation: https://gsap.com/docs/v3/HelperFunctions/helpers/getScrollPosition If you want to scroll to the start of the 2nd animation, for example, you could do this: https://codepen.io/GreenSock/pen/vYMqVVL?editors=1010 function getScrollPosition(animation, progress) { let p = gsap.utils.clamp(0, 1, progress || 0), nested = !animation.scrollTrigger, st = nested ? animation.parent.scrollTrigger : animation.scrollTrigger, containerAnimation = st.vars.containerAnimation, range = st.end - st.start, position = st.start + range * p; if (containerAnimation) { st = containerAnimation.scrollTrigger; return (st.start + (st.end - st.start) * (position / containerAnimation.duration())); } else if (nested) { let start = st.start + (animation.startTime() / animation.parent.duration()) * range, end = st.start + ((animation.startTime() + animation.duration()) / animation.parent.duration()) * range; return start + (end - start) * p; } return position; }

That's because you're using xPercent which is based on the width of each element. For example, xPercent: 100 would be a different number of pixels for an element that's 200px wide vs. one that's 500px wide. I think you meant to do something more like this, right?: https://codepen.io/GreenSock/pen/abxgjrp?editors=0010 It just involved using pixels instead of percentages.

Hi @Sharath Lingam - welcome to the GSAP forums! I glanced at that link you provided, and I'm not really sure what effect you thought required inertia. 🤷‍♂️ Inertia is more like for something that has a dynamic speed, often based on user interaction (like drag-flicking), helping it glide to a stop naturally. If you need help with a particular effect, feel free to create a minimal demo showing us your attempt. Please also keep in mind that Club GSAP provides the funding mechanism that makes all of what we do possible. So it feels a little odd for you to pop into our forums that we invest time in for free, asking us to burn time helping you to find a way NOT to join Club GSAP which is the very thing that pays for our time. 🫣 Hopefully you'll find that the membership fee more than pays for itself in a single project. Think about how much you bill for your time, how many hours it'd take to recreate what the bonus plugins do for you, and I bet you'd spend 10x more by trying to do it all on your own. But please don't join Club GSAP if you don't see incredible value there. 👍 Good luck with the project and research.

Just so you know, you could just call tween.revert() instead of doing both kill() and clearProps. You could also record the progress in your resize handler, and then re-apply that to make things continuous: https://codepen.io/GreenSock/pen/ZEZNmpz?editors=0010

That's still considered invalid syntax, though. I suppose it'll default to "-1150px top", for example. I strongly recommend using valid syntax though.

To be clear, I'm not knocking Lenis at all - seems like a great tool. I just wanted to point out that @Publipresse's comparison was missing a few things, like with ScrollSmoother, it smooth ALL forms of scrolling, including dragging the scrollbar, tabbing, using the arrow keys, etc. because it's wired into the NATIVE scrolling position. I'm not very familiar with Lenis, but I think it might be just for wheel scrolling. Both approaches have their up sides and downsides. Neither is "best" - it just depends on what's important to your project. Happy scrolling!

Yeah, that is definitely incorrect. Here's a fork that logs things as they fire: https://codepen.io/GreenSock/pen/JjVVzeM?editors=0010 It's firing: -1, 1, 2, 3, 0, 4, 1, 2 It should go in DESCENDING order because the things at the top of the page should get refreshed first, followed by things further down the page (so the priority should be highest at the top of the page). So the technique you're using there is kinda both inverted and overlapping.

I don't understand why you're doing this: ScrollTrigger.defaults({ smoothScrolling: false }); That doesn't do anything. That's not a valid setting. start: '-1150', end: '-200', Those are not valid values. What are you trying to do? start/end strings are supposed to contain two values, like start: "top bottom" or "-1150 0%". If you want to use specific scroll values (absolute), you can use numbers like start: 1150 (but a negative number doesn't make any sense since you can't scroll backwards past the top of the page). Maybe once we understand what you're trying to do, we can try to provide advice. But the problem here seems to be that you're using faulty/invalid start/end values.

Oh, that's not an actual thing you can install - that was purely a custom interface built for that particular demo that's aimed at helping folks understand the mechanics of timelines. There's GSDevTools for showing a basic scrubber and playback controls: https://gsap.com/docs/v3/Plugins/GSDevTools (it's a Club GSAP membership benefit). Enjoy your learning adventure! 💚